<template>
  <view class="x-ba container-editor">
    <view class="textarea">
      <view class="page-body">
        <view class="wrapper">
          <!-- <PickerColor
            v-if="show"
            color="#FF0000"
            @closePicker="closePicker"
            @onPickColor="onPickColor"
            @onColorChange="onColorChange"
          /> -->
          <view
            v-if="!readOnly"
            class="toolbar"
            @tap="format"
          >
            <!-- <view
              :class="formats.fontSize === '24px' ? 'ql-active' : ''"
              class="iconfont icon-font-size"
              data-name="fontSize"
              data-value="24px"
            > -->
            <!-- <view
              :class="formats.color? 'ql-active' : ''"
              class="iconfont icon-fontbgcolor"
              data-name="color"
              :data-value="formats.color"
              @tap="showPicker"
            /> -->
            <view
              title="高亮"
              :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
              class="iconfont icon-717bianjiqi_zitibeijingyanse"
              data-name="backgroundColor"
              data-value="#00ff00"
            >
              <text
                class="x-pa-sm x-flexp-jcai"
                style="background: #00ff00; width: 30px; height: 30px"
              >
                A
              </text>
            </view>
            <view
              title="标题一"
              :class="formats.header === 1 ? 'ql-active' : ''"
              class="iconfont icon-formatheader1"
              data-name="header"
              :data-value="1"
            >
              H1
            </view>
            <view
              title="标题二"
              :class="formats.header === 2 ? 'ql-active' : ''"
              class="iconfont icon-formatheader2"
              data-name="header"
              :data-value="2"
            >
              H2
            </view>
            <view
              title="加粗"
              :class="formats.bold ? 'ql-active' : ''"
              class="iconfont icon-zitijiacu"
              data-name="bold"
            >
              B
            </view>
            <view
              title="斜体"
              :class="formats.italic ? 'ql-active' : ''"
              class="iconfont icon-zitixieti"
              data-name="italic"
            >
              I
            </view>
            <view
              title="下划线"
              :class="formats.underline ? 'ql-active' : ''"
              class="iconfont icon-zitixiahuaxian"
              data-name="underline"
            >
              U
            </view>
            <view
              title="删除线"
              :class="formats.strike ? 'ql-active' : ''"
              class="iconfont icon-shanchuxian"
              data-name="strike"
            >
              A
            </view>
            <view
              title="左对齐"
              :class="formats.align === 'left' ? 'ql-active' : ''"
              class="iconfont icon-zuoduiqi"
              data-name="align"
              data-value="left"
            >
              左
            </view>
            <view
              title="居中"
              :class="formats.align === 'center' ? 'ql-active' : ''"
              class="iconfont icon-juzhongduiqi"
              data-name="align"
              data-value="center"
            >
              中
            </view>
            <view
              title="右对齐"
              :class="formats.align === 'right' ? 'ql-active' : ''"
              class="iconfont icon-youduiqi"
              data-name="align"
              data-value="right"
            >
              右
            </view>
            <view
              title="两端对齐"
              :class="formats.align === 'justify' ? 'ql-active' : ''"
              class="iconfont icon-zuoyouduiqi"
              data-name="align"
              data-value="justify"
            >
              两
            </view>
            <!-- <view
              :class="formats.lineHeight ? 'ql-active' : ''"
              class="iconfont icon-LineHeight"
              data-name="lineHeight"
              data-value="2"
            /> -->
            <!-- <view
              :class="formats.letterSpacing ? 'ql-active' : ''"
              class="iconfont icon-Character-Spacing"
              data-name="letterSpacing"
              data-value="2em"
            /> -->
            <!-- <view
              :class="formats.marginTop ? 'ql-active' : ''"
              class="iconfont icon-duanqianju"
              data-name="marginTop"
              data-value="10px"
            /> -->
            <!-- <view
              :class="formats.previewarginBottom ? 'ql-active' : ''"
              class="iconfont icon-duanhouju"
              data-name="marginBottom"
              data-value="10px"
            /> -->
            <!-- <view class="iconfont icon-rili4" @tap="insertDate"></view> -->
            <view
              title="列表"
              class="iconfont icon-checklist"
              data-name="list"
              data-value="check"
            >
              □ A
            </view>
            <view
              title="有序列表"
              :class="formats.list === 'ordered' ? 'ql-active' : ''"
              class="iconfont icon-youxupailie"
              data-name="list"
              data-value="ordered"
            >
              1. A
            </view>
            <view
              title="无序列表"
              :class="formats.list === 'bullet' ? 'ql-active' : ''"
              class="iconfont icon-wuxupailie"
              data-name="list"
              data-value="bullet"
            >
              · A
            </view>
            <view
              title="缩进"
              class="iconfont icon-outdent"
              data-name="indent"
              data-value="-1"
            >
              <i class="el-icon-s-fold" />
            </view>
            <view
              title="缩进"
              class="iconfont icon-indent"
              data-name="indent"
              data-value="+1"
            >
              <i class="el-icon-s-unfold" />
            </view>
            <view
              title="分割线"
              class="iconfont icon-fengexian"
              @tap="insertDivider"
            >
              ——
            </view>
            <view
              title="插入图片"
              class="iconfont icon-charutupian"
              @tap="insertImage"
            >
              <i class="el-icon-picture-outline" />
            </view>
            <view
              title="撤销"
              class="iconfont icon-undo"
              @tap="undo"
            >
              <i class="el-icon-refresh-left" />
            </view>
            <view
              title="重做"
              class="iconfont icon-redo"
              @tap="redo"
            >
              <i class="el-icon-refresh-right" />
            </view>
            <view
              title="清除"
              class="iconfont icon-format"
              @tap="clear"
            >
              <i class="el-icon-delete" />
            </view>
          </view>
          <editor
            :id="id"
            class="ql-container"
            placeholder="开始输入..."
            show-img-size
            show-img-toolbar
            show-img-resize
            :read-only="readOnly"
            @statuschange="onStatusChange"
            @ready="onEditorReady"
            @blur="onEditorBlur"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // const api = require('@/utils/api.js');
  // const util = require("@/utils/util.js");
  // import PickerColor from "../color-picker/color-picker.vue"
  export default {
    // components:{
    //   PickerColor
    // },
    props: {
      id: {//当前菜单标题
        type: String,
        default: 'editor'
      },
      value: {
        type: String,
        default: ''
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      maxlength: {
        type: String,
        default: '300'
      }
    },
    data() {
      return {
        currentTab: 0,
        curColor:'#000000',
        show:false,
        hdid: "",
        myHtml: "",
        formats: {},
        // photoUrl: util.commonUrl() + api.linkloadUrl
      }
    },
    methods: {
      onEditorBlur() {
        this.editorCtx.getContents({
          success: (res)=> {
            this.$emit('input', res.html)
          }
        })
      },
      showPicker() {
        this.show = true;
      },
      closePicker(e) {
        this.show = false;
      },
      onPickColor(e) {
        this.formats.color = e.hex;
      },
      onColorChange(e) {
        this.editorCtx.format('color', e)
      },
      saveContens() {
        let that = this;
        let maxlength = parseInt(that.maxlength);
        that.editorCtx.getContents({
          success: function(res) {
            // let html_text = util.formatrichtext(res.html);
            // let html_length = html_text.length;
						
            // if(html_length > maxlength) {
            //   uni.showModal(
            //     {
            //       title:'最多只能输入' + maxlength + '字',
            //       confirmText:'确定',
            //       showCancel:false,
            //       success(res) {
            //         that.$emit("changes",{html:res.html,length:html_length});
            //       }
            //     }
            //   );
            // } else {
            //   that.$emit("changes",{html:res.html,length:html_length});
            // }
          },
        })
      },
      update() {
        //获取一下是否有数据
        let that = this;
        setTimeout(()=> {
          that.editorCtx.setContents({
            "html": that.value
          });
        },1000)
      },
      onEditorReady() {
        let that = this;
        uni.createSelectorQuery().select('#'+that.id).context((res) => {
          that.editorCtx = res.context;
          that.update();
        }).exec();
      },
      undo() {
        this.editorCtx.undo()
      },
      redo() {
        this.editorCtx.redo()
      },
      format(e) {
        let {
          name,
          value
        } = e.target.dataset
        if (!name) return
        this.editorCtx.format(name, value)
      },
      onStatusChange(e) {
        const formats = e.detail
        this.formats = formats
      },
      insertDivider() {
        this.editorCtx.insertDivider();
      },
      clear() {
        this.editorCtx.clear();
      },
      insertDate() {
        const date = new Date()
        const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
        this.editorCtx.insertText({
          text: formatDate
        })
      },
      insertImage() {
        uni.chooseImage({
          count: 1,
        }).then(([err, res])=>{
          if(err) return
          return this.$x.request.upload({
            url: this.$x.request.url.xRequestUpload,
            file: res.tempFiles[0],
            name: 'file',
            data: { folderId: 1, parentDir: 'reditor' }
          }).then(res=>{
            this.editorCtx.insertImage({
              src: res.url,
              alt: '图像',
              width: '100%'
            })
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
	}

	.tabs .current {
		border-bottom: 2px solid #0369D6;
	}
	.tabs .tab {
		font-size: 32rpx;
	}

	.main {
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.main .item {
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		border-bottom: 1px solid #F2F2F2;
	}

	.main .item .left {
		min-width: 200rpx;
	}

	.main .title {
		padding-bottom: 20rpx;
		font-weight: bold;
		border-bottom: 1px solid #F2F2F2;
	}

	.main .textarea {
		border: 1px solid #F2F2F2;
	}

	.wrapper {
		padding: 0 10rpx;
	}

	.iconfont {
		/* display: inline-block; */
    /* padding: 5rpx;
		margin: 10rpx 10rpx; */
		cursor: pointer;
		font-size: 120% !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #f1f1f1; */
    background: #f8f8f8;
    margin-right: 2px;
    margin-top: 2px;
	}
  // .icon-717bianjiqi_zitibeijingyanse {
  //   background-color: #00ff00;
  // }
  .icon-zitijiacu {
    font-weight: bolder;
  }
  .icon-zitixieti {
    font-style: italic;
  }
  .icon-zitixiahuaxian {
    text-decoration: underline;
  }
  .icon-shanchuxian {
    text-decoration: line-through;
  }
	/* .icon-rili4 {
		font-size: 48rpx !important;
	}
	.icon-duanqianju, .icon-duanhouju,.icon-zitijiacu,.icon-zitixieti,.icon-zitixiahuaxian,.icon-shanchuxian {
		font-size: 36rpx!important;
	} */
	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	.ql-container {
		box-sizing: border-box;
		width: 100%;
		min-height: 300rpx;
		height: auto;
		background: #fff;
		/* font-size: 32rpx; */
		line-height: 1.5;
		padding-bottom: 60rpx;
	}
	::v-deep .ql-editor.ql-blank:before {
		/* font-size: 28rpx; */
		font-style: inherit;
	}
	.ql-active {
		color: $uni-color-primary;
	}
	button {
		width:150rpx;
		/* font-size: 30rpx; */
	}
</style>

